<template>
  <div>
    <img src="../assets/knowledge.png" alt="">
    <div class="content">
      <div class="types">
        <div :class="type === '1' ? 'isHover' : ''" @mouseover="over('1')">献血知识</div>
        <div :class="type === '2' ? 'isHover' : ''" @mouseover="over('2')">报销政策</div>
        <div :class="type === '3' ? 'isHover' : ''" @mouseover="over('3')">法律法规</div>
      </div>
      <div class="titles">
        <div class="title" v-for="item in titles" @click="linkFun(item)">
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title1: [
        {
          title: '不同类型疫苗接种后，多久能献血？',
          content: [
            '您知道吗？献血救人是用热血帮助他人，而在必要的时候接种疫苗是在守护自己，但是，当两件事在时间上临近时，一定要注意疫苗接种后需要间隔一定时间才能献血的。',
            '本期我们总结了咱们日常的疫苗类型及献血间隔时间，方便大家对应自己的情况作出时间调整。',
            'https://files.china-xianxue.com/files/265/1/2023/04/24/1080_1920_779361076177.png?&wxfrom=5&wx_lazy=1&wx_co=1',
            'https://files.china-xianxue.com/files/265/1/2023/04/24/1080_1920_060331085387.jpg?&wxfrom=5&wx_lazy=1&wx_co=1'
          ]
        },
        {
          title: '4.17世界血友病日｜关爱“玻璃人”，让生命不再脆弱',
          content: [
            'https://files.china-xianxue.com/files/265/1/2023/04/24/1080_1620_829420871469.png?&wxfrom=5&wx_lazy=1&wx_co=1',
            '2023年4月17日是第35个“世界血友病日”活动主题是“人人可及 预防出血”旨在提高全社会对血友病的关注和支持科学防治出血，优化防治策略提高规范诊疗能力和照护管理水平.一碰皮肤就出现一片淤青，一点小外伤就会出血不止，还会因为反复出血造成畸形、残疾，严重的出血甚至威胁生命……这些症状其实都来自一个人们不太熟悉的罕见疾病——“血友病”。',
            'https://files.china-xianxue.com/files/265/1/2023/04/24/1080_605_903610939549.png?&wx_lazy=1&wx_co=1',
            '这些人因为凝血功能障碍，稍有不慎便出血不止，因此血友病患者被形象地称为“玻璃人”。血友病是一种终生性疾病，目前只能医学干预以防止大出血维持生命为主，虽然血友病目前无法治愈，但随着医学技术的不断进步，患者的生活质量和预后已经得到了显著提高。'
          ]
        }
      ],
      title2: [
        {
          title: '办理用血费用减免须知',
          content: [
            '一、医疗机构直接减免',
            '（一）办理途径:在京医疗机构（含驻京医疗机构）用血的，可在患者门急诊或住院费用结算时减免相关用血费用，具体请咨询医疗机构相关部门。',
            '（二）所需材料1.献血者本人用血需提供有效身份证件原件（复印件）。2.献血者配偶或直系亲属用血需提供:（1）献血者有效身份证件原件（复印件）；（2）用血者有效身份证件原件（复印件）；（3）亲属关系证明材料，如户口本、结婚证、出生证明等或签署《血费减免亲属关系承诺书》。',
            '二、其他减免方式（一）办理途径1.自助减免。扫描以下二维码关注“首都献血”微信公众号，进入“献血服务”中“血费减免”模块，按提示上传相关材料。2.邮寄或现场减免。持相关材料到就近献血工作机构或驻京部队血液协调办办理，或邮寄材料办理。咨询电话如下：',
            'https://files.china-xianxue.com/files/265/1/2023/03/31/962_735_820668162306.png'
          ]
        }
      ],
      title3: [
        {
          title: '关于印发医疗废物分类目录（2021 年版）的通知',
          date: '2018-03-12',
          content: [
            '各省、自治区、直辖市及新疆生产建设兵团卫生健康委、生态环境厅（局）：',
            '为进一步规范医疗废物管理，促进医疗废物科学分类、科学处置，国家卫生健康委和生态环境部组织修订了 2003 年《医疗废物分类目录》，形成了《医疗废物分类目录（2021 年版）》。现印发给你们，请遵照执行。',
            '一、根据《中华人民共和国传染病防治法》《中华人民共和国固体废物污染环境防治法》《医疗废物管理条例》《医疗卫生机构医疗废物管理办法》《国家危险废物名录》等法律法规、部门规章的规定，制定本目录。本目录适用于各级各类医疗卫生机构。',
            '二、医疗废物的分类收集应当根据其特性和处置方式进行，并与当地医疗废物处置的方式相衔接。在保证医疗安全的情况下，鼓励医疗卫生机构逐步减少使用含汞血压计和体温计，鼓励使用可复用的医疗器械、器具和用品替代一次性医疗器械、器具和用品，以实现源头减量。医疗废物分为感染性废物、损伤性废物、病理性废物、药物性废物和化学性废物，医疗废物分类目录见附表 1。',
            '四、患者截肢的肢体以及引产的死亡胎儿，纳入殡葬管理。',
            '五、药物性废物和化学性废物可分别按照《国家危险废物名录》中 HW03 类和 HW49 类进行处置。',
            '六、列入本目录附表 2 医疗废物豁免管理清单中的医疗废物，在满足相应的条件时，可以在其所列的环节按照豁免内容规定实行豁免管理。',
            '七、重大传染病疫情等突发事件产生的医疗废物，可按照县级以上人民政府确定的工作方案进行收集、贮存、运输和处置等。',
            '八、本目录自发布之日起施行。2003 年 10 月 10 日原卫生部、原国家环保总局发布的《医疗废物分类目录》（卫医发〔2003〕287号）同时废止。',
            'https://files.china-xianxue.com/files/265/1/2021/12/06/791_940_105477212670.jpg'
          ]
        }
      ],
      type: '1',
      titles: []
    };
  },
  created() {
    this.titles = this.title1;
  },
  methods: {
    over(type) {
      this.type = type
      this.titles = this[`title${type}`]
    },
    linkFun(data) {
      console.log(data)
      this.$router.push({
        path: '/detail',
        query: data
      })
    }
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100vw;
  height: 300px;
}
.content {
  width: 1200px;
  margin: 20px auto;
  display: flex;
  gap: 20px;
}
.types div {
  width: 200px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  transition: .5s;
}
.types div:hover {
  height: 120px;
  line-height: 120px;
  color: #fff;
}
.isHover {
  background: #ed3da1!important;
  height: 120px!important;
  line-height: 120px!important;
  color: #fff!important;
}
.titles {
  width: 100%;
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px dashed #999;
  cursor: pointer;
}
.title:hover {
  color: orange;
}
</style>
